import { memo } from "react"
import { useSelector, useDispatch } from 'react-redux';
import YiCategory, { CategoryData } from "../components/Yi-category"
import YiFooter from "../components/Yi-footer"
import Yiheader from "../components/Yi-header"
import YiHotSearch from "../components/Yi-hot-search"
import YiPhotoWall from "../components/Yi-photo-wall"
import useRequest from "../hooks/useRequest"
import { AppDispatch, RootState } from "../store";
import { keywordChange } from "../store/photo/photoSlice";
const Home: React.FC = () => {
  // 获取分类列表
  const [initCategory]: [data: CategoryData] = useRequest("http://47.93.31.63:8000/category", { method: 'GET' });

  // 处理输入框
  const dispatch = useDispatch<AppDispatch>();
  //
  const { keyword, start, photoData, category, categoryName } = useSelector((state: RootState) => state.photo);

  // 分类数据

  const handleInput = (value: string) => {
    dispatch(keywordChange({ keyword: value }))
  }


  return (
    <div>
      <Yiheader keyword={keyword} handleInput={handleInput} start={start} category={category} />
      <YiHotSearch />
      <YiCategory initCategory={initCategory} start={start} />
      <YiPhotoWall photoData={photoData?.data} keyword={keyword} categoryname={categoryName} />
      <YiFooter photototal={photoData?.total} keyword={keyword} category={category} />
    </div>
  )
}


export default memo(Home)